<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
    <link rel="stylesheet" href="./css/ol.css" type="text/css">
    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
    <script src="https://unpkg.com/elm-pep"></script>
    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
    
    <link rel="stylesheet" href="center.css">
    <title>Advanced View Positioning</title>
  </head>
  <body>

    <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
      <a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt="">&nbsp;OpenLayers</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- menu items that get hidden below 768px width -->
      <nav class="collapse navbar-collapse" id="olmenu">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="../doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
          <li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
        </ul>
      </nav>
    </header>

    <div class="container-fluid line-numbers">

      <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
        <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        This example uses OpenLayers v<span>6.5.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
      </div>


      <div class="row-fluid">
        <a href="#" id="codepen-button" class="btn btn-link float-right">
          <i class="fa fa-codepen fa-lg"></i> Edit
        </a>
        <div class="span12">
          <h4 id="title">Advanced View Positioning</h4>
          <p class="tags">
            <span class="badge-group">
              <a
                href="./index.html?q=center" class="badge badge-info">center</a
              ><a
                class="badge badge-info tag-modal-toggle text-white"
                data-toggle="modal"
                data-target="#tag-example-list"
                data-title="center"
                data-content="
                  &lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./center.html&quot;&gt;Advanced View Positioning&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./view-padding.html&quot;&gt;View Padding&lt;/a&gt;"
                tabindex="0"
                >2</a>
            </span>
            <span class="badge-group">
              <a
                href="./index.html?q=rotation" class="badge badge-info">rotation</a
              ><a
                class="badge badge-info tag-modal-toggle text-white"
                data-toggle="modal"
                data-target="#tag-example-list"
                data-title="rotation"
                data-content="
                  &lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./center.html&quot;&gt;Advanced View Positioning&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./rotation.html&quot;&gt;View Rotation&lt;/a&gt;"
                tabindex="0"
                >2</a>
            </span>
            <span class="badge-group">
              <a
                href="./index.html?q=openstreetmap" class="badge badge-info">openstreetmap</a
              ><a
                class="badge badge-info tag-modal-toggle text-white"
                data-toggle="modal"
                data-target="#tag-example-list"
                data-title="openstreetmap"
                data-content="
                  &lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./center.html&quot;&gt;Advanced View Positioning&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./attributions.html&quot;&gt;Attributions&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./canvas-tiles.html&quot;&gt;Canvas Tiles&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./cartodb.html&quot;&gt;CartoDB source example&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./export-pdf.html&quot;&gt;Export PDF example&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./geojson.html&quot;&gt;GeoJSON&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./geolocation.html&quot;&gt;Geolocation&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./hit-tolerance-priority.html&quot;&gt;Hit tolerance priority&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./layer-clipping.html&quot;&gt;Layer Clipping&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./layer-swipe.html&quot;&gt;Layer Swipe&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./localized-openstreetmap.html&quot;&gt;Localized OpenStreetMap&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./export-map.html&quot;&gt;Map Export&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./mouse-position.html&quot;&gt;Mouse Position&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./reprojection-wgs84.html&quot;&gt;OpenStreetMap Reprojection&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./scaleline-indiana-east.html&quot;&gt;OpenStreetMap Reprojection with ScaleLine Control&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./permalink.html&quot;&gt;Permalink&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./scale-line.html&quot;&gt;Scale Line&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./simple.html&quot;&gt;Simple Map&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./teleport.html&quot;&gt;Teleporting Maps&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./layer-clipping-vector.html&quot;&gt;Vector Clipping Layer&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-labels.html&quot;&gt;Vector Labels&lt;/a&gt;
                  &lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./rotation.html&quot;&gt;View Rotation&lt;/a&gt;"
                tabindex="0"
                >22</a>
            </span>
          </p>
          <div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="tag-example-title"></h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="list-group"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="mapcontainer">
  <div id="map" class="map"></div>
  <div class="padding-top"></div>
  <div class="padding-left"></div>
  <div class="padding-right"></div>
  <div class="padding-bottom"></div>
  <div class="center"></div>
</div>
<button id="zoomtoswitzerland">Zoom to Switzerland</button> (best fit).<br/>
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
<button id="centerlausanne">Center on Lausanne</button>

        </div>
        <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
          <input id="codesandbox-params" type="hidden" name="parameters">
        </form>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <p id="shortdesc">This example demonstrates how a map&#x27;s view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.</p>
          <div id="docs"><p>This example demonstrates how a map&#39;s view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. The map above has top, right, bottom, and left padding applied inside the viewport. The view&#39;s <code>fit</code> method is used to fit a geometry in the view with the same padding. The view&#39;s <code>centerOn</code> method is used to position a coordinate (Lausanne) at a specific pixel location (the center of the black box). <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p> <p><b>Note:</b> This example does not shift the view center. So the zoom  controls and rotating the map will still use the center of the viewport as anchor. To shift the whole view based on a padding, use the <code>padding</code> option on the view, as shown in the <a href="view-padding.html">view-padding.html</a> example. </p></p>
</div>
        </div>
      </div>

      <div class="row-fluid">
        <h5 class="source-heading">main.js</h5>
        <pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
import GeoJSON from &#x27;ol/format/GeoJSON&#x27;;
import Map from &#x27;ol/Map&#x27;;
import View from &#x27;ol/View&#x27;;
import {Circle as CircleStyle, Fill, Stroke, Style} from &#x27;ol/style&#x27;;
import {OSM, Vector as VectorSource} from &#x27;ol/source&#x27;;
import {Tile as TileLayer, Vector as VectorLayer} from &#x27;ol/layer&#x27;;

/** @type {VectorSource&lt;import(&quot;../src/ol/geom/SimpleGeometry.js&quot;).default&gt;} */
var source &#x3D; new VectorSource({
  url: &#x27;data/geojson/switzerland.geojson&#x27;,
  format: new GeoJSON(),
});
var style &#x3D; new Style({
  fill: new Fill({
    color: &#x27;rgba(255, 255, 255, 0.6)&#x27;,
  }),
  stroke: new Stroke({
    color: &#x27;#319FD3&#x27;,
    width: 1,
  }),
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: &#x27;rgba(255, 255, 255, 0.6)&#x27;,
    }),
    stroke: new Stroke({
      color: &#x27;#319FD3&#x27;,
      width: 1,
    }),
  }),
});
var vectorLayer &#x3D; new VectorLayer({
  source: source,
  style: style,
});
var view &#x3D; new View({
  center: [0, 0],
  zoom: 1,
});
var map &#x3D; new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    vectorLayer ],
  target: &#x27;map&#x27;,
  view: view,
});

var zoomtoswitzerland &#x3D; document.getElementById(&#x27;zoomtoswitzerland&#x27;);
zoomtoswitzerland.addEventListener(
  &#x27;click&#x27;,
  function () {
    var feature &#x3D; source.getFeatures()[0];
    var polygon &#x3D; feature.getGeometry();
    view.fit(polygon, {padding: [170, 50, 30, 150]});
  },
  false
);

var zoomtolausanne &#x3D; document.getElementById(&#x27;zoomtolausanne&#x27;);
zoomtolausanne.addEventListener(
  &#x27;click&#x27;,
  function () {
    var feature &#x3D; source.getFeatures()[1];
    var point &#x3D; feature.getGeometry();
    view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
  },
  false
);

var centerlausanne &#x3D; document.getElementById(&#x27;centerlausanne&#x27;);
centerlausanne.addEventListener(
  &#x27;click&#x27;,
  function () {
    var feature &#x3D; source.getFeatures()[1];
    var point &#x3D; feature.getGeometry();
    var size &#x3D; map.getSize();
    view.centerOn(point.getCoordinates(), size, [570, 500]);
  },
  false
);
</code></pre>
      </div>

      <div class="row-fluid">
        <h5 class="source-heading">index.html</h5>
        <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Advanced View Positioning&lt;/title&gt;
    &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
    &lt;script src="https://unpkg.com/elm-pep"&gt;&lt;/script&gt;
    &lt;style&gt;
      .map {
        width: 100%;
        height:400px;
      }
      .mapcontainer {
        position: relative;
        margin-bottom: 20px;
      }
      .map {
        width: 1000px;
        height: 600px;
      }
      .map .ol-zoom {
        top: 178px;
        left: 158px;
      }
      .map .ol-rotate {
        top: 178px;
        right: 58px;
      }
      .map .ol-attribution,
      .map .ol-attribution.ol-uncollapsible {
        bottom: 30px;
        right: 50px;
      }
      .padding-top {
        position: absolute;
        top: 0;
        left: 0px;
        width: 1000px;
        height: 170px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-left {
        position: absolute;
        top: 170px;
        left: 0;
        width: 150px;
        height: 400px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-right {
        position: absolute;
        top: 170px;
        left: 950px;
        width: 50px;
        height: 400px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-bottom {
        position: absolute;
        top: 570px;
        left: 0px;
        width: 1000px;
        height: 30px;
        background: rgba(255, 255, 255, 0.5);
      }
      .center {
        position: absolute;
        border: solid 1px black;
        top: 490px;
        left: 560px;
        width: 20px;
        height: 20px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class&#x3D;&quot;mapcontainer&quot;&gt;
      &lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
      &lt;div class&#x3D;&quot;padding-top&quot;&gt;&lt;/div&gt;
      &lt;div class&#x3D;&quot;padding-left&quot;&gt;&lt;/div&gt;
      &lt;div class&#x3D;&quot;padding-right&quot;&gt;&lt;/div&gt;
      &lt;div class&#x3D;&quot;padding-bottom&quot;&gt;&lt;/div&gt;
      &lt;div class&#x3D;&quot;center&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;button id&#x3D;&quot;zoomtoswitzerland&quot;&gt;Zoom to Switzerland&lt;/button&gt; (best fit).&lt;br/&gt;
    &lt;button id&#x3D;&quot;zoomtolausanne&quot;&gt;Zoom to Lausanne&lt;/button&gt; (with min resolution),&lt;br/&gt;
    &lt;button id&#x3D;&quot;centerlausanne&quot;&gt;Center on Lausanne&lt;/button&gt;
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
      </div>


      <div class="row-fluid">
        <h5 class="source-heading">package.json</h5>
        <pre><code id="example-pkg-source" class="language-json">{
  &quot;name&quot;: &quot;center&quot;,
  &quot;dependencies&quot;: {
    &quot;ol&quot;: &quot;6.5.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;parcel&quot;: &quot;^2.0.0-beta.1&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;parcel index.html&quot;,
    &quot;build&quot;: &quot;parcel build --public-url . index.html&quot;
  }
}</code></pre>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
    <script src="./resources/prism/prism-1.20.0.min.js"></script>
    <script src="./resources/common.js"></script>
    <script src="common.js"></script>
        <script src="center.js"></script>
    <script>
      $('#tag-example-list').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget); // Button that triggered the modal
        const title = button.data('title');
        const content = button.data('content');
        const modal = $(this)
        modal.find('.modal-title').text(title);
        modal.find('.modal-body').html(content);
      });

      var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
      fetch(packageUrl).then(function(response) {
        return response.json();
      }).then(function(json) {
        var latestVersion = json.version;
        document.getElementById('latest-version').innerHTML = latestVersion;
        var url = window.location.href;
        var branchSearch = url.match(/\/([^\/]*)\/examples\//);
        var cookieText = 'dismissed=-' + latestVersion + '-';
        var dismissed = document.cookie.indexOf(cookieText) != -1;
        if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '6.5.0' != latestVersion) {
          var link = url.replace(branchSearch[0], '/latest/examples/');
          fetch(link, {method: 'head'}).then(function(response) {
            var a = document.getElementById('latest-link');
            a.href = response.status == 200 ? link : '../../latest/examples/';
          });
          var latestCheck = document.getElementById('latest-check');
          latestCheck.style.display = '';
          document.getElementById('latest-dismiss').onclick = function() {
            latestCheck.style.display = 'none';
            document.cookie = cookieText;
          }
        }
      });
    </script>
  </body>
</html>
